<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Title</title>
    <style>
        [v-cloak] {
            /*display: none;*/
            color: red;
        }
    </style>
</head>
<body>

<div id="app" v-html="content" :data-adada="mydata" v-if="show"></div>

<div id="app2">
    <div v-for="item in list" v-cloak>
        <span>id:{{item.id}}</span>|
        <span>name:{{item.name}}</span>
    </div>
    <button @click="btnclick">点击事件</button>
    <input type="text" v-model="modelmsg">{{modelmsg}}
    <div v-if="show">
        <div>123</div>
    </div>
    <div v-else="show">
        默认显示
    </div>
    <div>{{}}</div>
    <div>
        name：<input type="text" v-model.debounce="message"/>{{message}}
    </div>
    <div>
        aaaaa：<input type="number" v-model.number="age">
    </div>
    <div>
        2131：
        <input type="checkbox" id="book" value="book" v-model="chk"/>
        <label for="book">aaa</label>
        <input type="checkbox" id="code" value="code" v-model="chk"/>
        <label for="code">cassa</label>
        {{chk}}
    </div>
    <div>
        sss
        <input type="radio" name="radio" v-model="rdo" id="boy" value="0"/>
        <label for="boy">nan</label>
        <input type="radio" name="radio" v-model="rdo" id="girl" value="1"/>
        <label for="girl">nv</label>
        {{rdo}}
    </div>
    <div>
        <select v-model="sel">
            <option value="0">111</option>
            <option value="1">222</option>
            <option value="2">333</option>
        </select>
        {{sel}}
    </div>
    <div>

    </div>
    <div>
f{{mytext}}f
    </div>
    <div :class="[classA,{classB:isB,classC:isC}]">22222222222</div>
    <div v-pre>{{ this will not be compiled }}</div>
    <div v-cloak>
        {{message}}
    </div>
    <div v-on="{ mousedown: doThis, mouseup: doThat }" id="div1">
        监听click
    </div>
    <form v-on:submit.prevent action="1.html" method="get">
        <input type="submit" value="submit">
    </form>
    <div v-on:click.self.prevent  style="background-color: #999;padding: 20px;" id="test">
        <button>button</button>
    </div>
    <div v-on:scroll.passive="onScroll" style="height: 200px;overflow-y: scroll">
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
        12313212132132132<br>
    </div>

    <input @mouseup.left="no">
    <span>{{txt}}</span>
    {{getMessage}}
</div>
<style type="text/css">
    nav{
        background-color: #5597b4;
        margin:50px auto;
        display: inline-block;
        border-radius: 5px;
    }
    nav a{
        text-decoration: none;
        color: #fff;
        display: inline-block;
        padding: 20px 30px;
    }

    nav.home .home,
    nav.projects .projects,
    nav.services .services,
    nav.contact .contact{
        background-color:#e35885;
    }
</style>
<div id="main" v-cloak>
    <nav v-bind:class="active">

        <!--<a href="#" class="home" v-on:click="makeActive('home')">Home</a>
        <a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
        <a href="#" class="services" v-on:click="makeActive('services')">Services</a>
        <a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>-->

        <a href="#" v-for="item in list" v-bind:class="item.className" v-on:click.prevent="makeActive(item.name)">{{item.name}}</a>
    </nav>

    <!-- The mustache expression will be replaced with the value of "active".
         It will automatically update to reflect any changes. -->

    <p>You chose <b>{{active}}</b></p>
</div>

<div id="app3">
   <div v-bind:class="[class1,class2,{class3:isclass3}]" v-bind:style="{'fontSize':style1,'background-color':bgcolor}">
       <input type="text" value="" v-model="count">{{count|capitalize}}
   </div>
</div>

</body>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<!--<script src="https://cdn.bootcss.com/vue/0.9.1/vue.min.js"></script>-->
<script type="text/javascript">

    var app3 =new Vue({
        el:'#app3',
        data:{
            count:0,
            style1: '20px',
            class1: 'bbbbb',
            class2: 'bbbbb',
            class3: 'ccc',
            isclass3:true,
            bgcolor:'#999'
        },
        methods:{
            test:function(){
                this.count+=1;
            }
        },
        filters:{
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    });

    app3.test();



    // Creating a new Vue instance and pass in an options object.
    var demo = new Vue({

        // A DOM element to mount our view model.
        el: '#main',

        // Define properties and give them initial values.
        data: {
            active: 'home',
            list:[
                {name:'html',className:'html'},
                {name:'css',className:'css'},
                {name:'javascript',className:'javascript'},
                {name:'services',className:'services'}
            ]
        },

        // Functions we will be using.
        methods: {
            makeActive: function(item){
                // When a model is changed, the view will be automatically updated.
                this.active = item;
            }
        }
    });

    //Vue.config.delimiters=['<%','%>'];

    var app=new Vue({
        el:'#app',
        data:{
            content:'<span>123456789</span>',
            mydata:'111111111111',
            show:1
        }
    });



    var app2= new Vue({
        el:'#app2',
        data:{
            list:[
                {id:1,name:'111'},
                {id:2,name:'222'},
                {id:3,name:'333'},
                {id:4,name:'444'}
            ],
            modelmsg:'',
            show:0,
            message: 'Hello Vue.js!',
            chk:[],
            rdo:0,
            sel:2,
            age:'00',
            mytext:'<span>1111111111</span>',
            classA:'A',
            isB:false,
            isC:true,
            txt:'aaaaaaa'
        },
        methods:{
            btnclick:function(){
                this.list[0].id='0';
                this.list[0].name='1';
            },
            doThis:function(){
                console.info(1);
            },
            doThat:function(){
                console.info(2);
            },
            doSelect:function(){
                console.info(3);
            },
            onSubmit:function(){
                return true;
            },
            test:function(){
                alert('test');
            },
            onScroll:function(){

            },
            no:function(){
                alert('no');
            }

        },
        computed:{
            getMessage: {
//                cache:false,
                get: function(){
                    return Date.now()+this.txt;
                }
            }
        }


    })


</script>
</html>